<template>
	<fui-nav-bar title="圈子"></fui-nav-bar>
	<fui-search-bar placeholder="搜索" @search="search"></fui-search-bar>
	<view class="container">
		<fui-list>
			<view class="card" v-for="(item, index) in cardList" :key="index">
				<view class="user">
					<view class="avatar">
						<image :src="item.userPhoto || '@/static/1.jpg'" alt="加载错误" />
					</view>
					<view class="name">
						<span>{{ item.username }}</span>
					</view>
				</view>
				<view class="content">{{ item.text }}</view>
				<view class="share_img">
					<image class="image" @click="imgPreview(index)" v-for="(x, i) in item.imageUrls" :key="i" :src="x" alt="加载错误" />
				</view>
				<view class="bottom-box">
					<!-- 定位文字 -->
					<view v-show="item.place">
						<fui-icon name="location-fill" size="23"></fui-icon>
						<text>{{ item.place }}</text>
					</view>
					<!-- 发布时间和点赞评论 -->
					<view class="time-thumbs-box flex-between">
						<uni-dateformat :date="item.time" :threshold="[60000, 24 * 3600000 * 10]" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
						<!-- 点赞评论区 -->
						<view class="thumbs-up flex-between">
							<view class="thumbs-box">
								<fui-icon name="like" size="36"></fui-icon>
								23
							</view>

							<view class="comment-box">
								<fui-icon name="message" size="36"></fui-icon>
								14
							</view>
						</view>
					</view>
				</view>
			</view>
		</fui-list>
		<view style="width: 100%; height: 200rpx"></view>
	</view>
	<fui-movable-view :bottom="400">
		<view class="fui-fab-box" @click="publish">
			<fui-icon name="plus" color="#fff"></fui-icon>
		</view>
	</fui-movable-view>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
import { getCircleList } from '@/request/modules/cricle.js';
import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app';
import { showMsg } from '../../utils/interact';
import useCircleStore from '../../store/circle';
const imgList = [
	'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01YtNfFM1yVyuVXVndk_%21%212212801606585-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1727330881&t=1a529e82d8d35c85cfd6e65c4f5ae92e',
	'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN012iPydo1yVyuMF4K9e_%21%212212801606585-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1727330881&t=26eda636f2730d8eb0a72fcb7e6cdf0f',
	'https://l.b2b168.com/2022/08/01/18/202208011850049219824.jpg',
	'https://l.b2b168.com/2022/08/01/18/202208011850049219824.jpg',
	'https://l.b2b168.com/2022/08/01/18/202208011850049219824.jpg',
	'https://l.b2b168.com/2022/08/01/18/202208011850049219824.jpg'
];
export default defineComponent({
	name: 'circle',
	setup() {
		const state = reactive({
			imgList,
			cardList: [],
			pages: 1,
			pageSize: 3,
			total: 0 //总页数
		});

		const imgPreview = (item) => {
			console.log(item);
			uni.previewImage({
				current: item,
				showmenu: true,
				urls: imgList
			});
		};
		const publish = () => {
			uni.navigateTo({
				url: '/pages_circle/add'
			});
		};
		const resSaveTraffic = getCircleList();
		// 触底加载更多
		onReachBottom(() => {
			state.pages++;
			// 是否有更多数据
			if (state.total < state.pages) return showMsg('没有更多数据了');
			getCircleListData();
		});
		// 下拉刷新
		onPullDownRefresh(() => {
			state.pages = 1;
			state.cardList = [];
			getCircleListData(() => {
				uni.stopPullDownRefresh();
			});
		});
		const search = () => {
			uni.navigateTo({
				url: '/pages_circle/search'
			});
		};
		// 生命周期函数
		onMounted(() => {
			getCircleListData();
		});
		// 发布完成，更新数据
		onShow(() => {
			if (useCircleStore().isUpdate) {
				setTimeout(() => {
					state.pages = 1;
					state.cardList = [];
					getCircleListData();
				}, 1000);
			}
		});
		//请求数据
		// 请求圈子列表
		function getCircleListData(cb) {
			resSaveTraffic({
				pages: state.pages,
				pageSize: state.pageSize
			}).then((res) => {
				cb && cb();
				state.total = res.total;
				state.cardList = [...state.cardList, ...res.list];
				// 处理后端返回的日期字符串
				/* 
					发布时间戳-当前时间戳
					大体分为以下几种情况：
					1. 刚刚（大于0小于等于1分钟）
					2. xx分钟前（大于1分钟小于等于一小时）
					3. xx小时前（大于1小时且小于等于当前小时数）
					4. 昨天（大于当前小时数且小于等于（24小时+当前小时数））
					5. xx天前（大于24小时+当前小时数）
				 */
			});
		}
		return {
			...toRefs(state),
			imgPreview,
			publish,
			search
		};
	}
});
</script>

<style scoped lang="scss">
page {
	height: 100%;
}
.container {
	width: 100%;
	height: 100vh;
	background: rgba(249, 249, 249, 0.3);
}
.card {
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #f2f2f2;
	.user {
		display: flex;
		align-items: center;
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			overflow: hidden;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
		.name {
			font-size: 26rpx;
			font-weight: 600;
		}
	}
	.content {
		font-size: $uni-font-size-base;
		margin-top: 20rpx;
	}
	.share_img {
		display: flex;
		flex-wrap: wrap;
		.image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12px;
			margin-right: 20rpx;
			margin-top: 10rpx;
		}
	}
	.bottom-box {
		font-size: $uni-font-size-base;
		margin-top: 20rpx;
		color: #999;
		// 日期点赞评论
		.time-thumbs-box {
			.thumbs-up {
				width: 26%;
			}
		}
	}
}
.fui-fab-box {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: #465cff;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
